<!--
 * @Author: Jason Liu
 * @Date: 2023-11-02 15:02:23
 * @Desc: 
-->
<template>
  <div class="indicator_navigation_container">
    <a-layout>
      <tool-bar
        v-model="indicatorInfo"
        :step.sync="stepCode"
        :close="close"
        @reload="reloadPage"
        @save="savePage"
        @add="addPage"
        :key="toolBarKey"
        @back="goBack"
        @synchronous="synchronous"
        @changeIndicatorInfo="setIndicatorInfo"
        @menuClick="changeModelRecord"
      />

      <a-layout class="main_indicator_card">
        <a-layout-sider v-model="collapsed" :trigger="null" collapsible width="140">
          <br />
          <br />
          <a-steps v-model="stepCode" direction="vertical">
            <template v-for="item in deviseList">
              <a-step :key="item.code">
                <template slot="title">
                  <win-icon :type="item.icon" v-if="item.icon" /><br />
                  {{ item.name }}
                </template>
              </a-step>
            </template>
          </a-steps>
        </a-layout-sider>
        <a-layout-content>
          <a-tabs v-model="activeId" class="devise_tab" :key="indicatorInfo.code">
            <a-tab-pane v-for="item in deviseList" :key="item.code" :tab="item.name">
              <a-spin :spinning="loading">
                <div class="devise_container">
                  <template v-if="item.type == 'biPage'">
                    <iframe
                      class="iframe_body"
                      :ref="item.code"
                      v-if="item.structure"
                      :key="`${item.id}_${indicatorInfo.id}_${item.key}`"
                      :src="item.url"
                    />
                  </template>
                  <template v-else>
                    <component
                      v-if="item.structure"
                      v-model="indicatorInfo"
                      :ref="item.code"
                      :is="item.moduleName"
                    ></component>
                  </template>
                </div>
              </a-spin>
            </a-tab-pane>
          </a-tabs>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
.ant-spin-nested-loading {
  height: 100%;
  /deep/.ant-spin-container {
    height: 100%;
  }
}
.indicator_navigation_container {
  background: #eff2fd;
  width: 100%;
  height: 100%;
  .ant-layout {
    height: 100%;
  }
  .main_indicator_card {
    height: 100%;

    /deep/.ant-layout-sider {
      height: 100%;
      padding: 8px;
      box-shadow: 6px 0px 6px 0px rgba(0, 0, 0, 0.1);
      .ant-steps-item {
        height: 72px;
        text-align: center;
        .ant-steps-item-title {
          font-size: 14px;
          line-height: 24px;
          .win-icon {
            font-size: 28px;
          }
        }
      }
      .ant-steps-item-active {
        .ant-steps-item-content {
          .ant-steps-item-title {
            color: #2d5afa;
          }
        }
      }
      .ant-steps {
        .ant-steps-item-icon {
          margin-right: 0;
        }
      }
    }
    .devise_tab {
      height: 100%;
      padding: 8px 0 0 8px;
      /deep/.ant-tabs-bar {
        display: none;
      }

      /deep/.ant-tabs-content {
        height: 100%;
        .ant-tabs-tabpane {
          height: 100%;
          .devise_container {
            height: 100%;
            width: 100%;
            background: #ffffff;

            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

            .iframe_body {
              width: 100%;
              height: 100%;
              border: none;
              overflow: auto;
              .n-layout-header {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.n-layout-header {
  display: none;
}
</style>
